<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>
<div id="app">
    <p>methods执行currentTime函数:{{currentTime()}}</p>
    <p>computed执行currentTime函数{{currentTime()}}</p>
</div>

<!--
methods和computed的区别

computed 可完成各种复杂的逻辑，包括运算，函数调用，最终只要返回一个结果
computed具有缓存功能，在系统刚运行的时候调用1次，只有当结果产生变化后才会再被调用

methods方法会更节省资源
-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {message: "hello,vue"},
        methods: {
            currentTime: function () {
                return Date.now(); // 返回当前时间戳
            }
        },
        computed: {
            currentTime2: function () {
                this.message;
                return Date.now();
            }
        }
    })

</script>
</body>
</html>
